<template>
  <el-upload
    :action="action"
    :accept="accept"
    :headers="headers"
    :data="uploadData"
    :before-upload="beforeUpload"
    :on-progress="handleProgress"
    :on-success="handleSuccess"
    :on-error="handleError"
    :show-file-list="false">
    <el-button :loading="importLoading" type="primary">
      <svg-icon icon-class="import_btn" />
      <span class="ml-5">导入</span>
    </el-button>
  </el-upload>
</template>


<script>
export default {
  props: {
    // 上传地址
    action: {
      type: String,
      default: '',
      require: true,
    },
    // 接受文件类型
    accept: {
      type: String,
      default: '.xlsx,.xls'
    },
    // 请求头
    headers: {
      type: Object,
      default: () => ({
        Accept: 'application/json, text/javascript, */*; q=0.01'
      })
    },
    // 额外参数
    uploadData: {
      type: Object,
      default: () => {
        // method: 'masget.bankaccount.white.accountinfo.merchant.import',
        // data: {
        //   accounttype_se: '',
        //   accountname_s: '',
        //   bankaccount_s: '',
        //   whiteaccounttype_s: '',
        // },
      }
    },
  },
  data () {
    return {
      // 导入
      importLoading: false,
    };
  },
  methods: {
    // 文件上传前
    beforeUpload (file) {
      if (file.size > 10000000) {
        this.$message.warning('文件大小不能超过10M');
        return false;
      }
      if (file.size < 1000) {
        this.$message.warning('文件大小不能小于1KB');
        return false;
      }
    },
    // 文件上传时
    handleProgress () {
      this.importLoading = true;
    },
    // 文件上传成功时的钩子
    handleSuccess (res, files, fileList) {
      this.importLoading = false;
      if (res.ret == 0) {
        this.$emit('uploadSuccess', res);
      } else {
        this.$message.error(res.message);
      }
    },
    // 上传失败
    handleError(res, file, fileList) {
      this.importLoading = false;
      this.$message.error(res.message || '上传失败');
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
